<template>
	<view>
		<view class="mb-80">
			<view class="avatar-box flex items-center justify-center">
				<view class="avatar-upload flex items-center justify-center" @click="chooseAvatar()" hover-class="hover-class"
					hover-stay-time="150">
					<u-icon style="opacity: .5;" name="camera" size="60" color="#fff"></u-icon>
				</view>
				<u-avatar :src="avatar" size="120"></u-avatar>
			</view>
			<view class="flex items-center justify-center font-24 font-bold" style="color: #666;">
				点击更换头像
			</view>
		</view>
		<view class="mx-32">
			<u-field v-model="userInfo.name" input-align="right" label="昵称" placeholder="请输入昵称" />
		</view>

		<button class="add-btn" @click="submit">保存</button>
	</view>
</template>

<script>
	// #ifndef H5
	import {
		mapState
	} from 'vuex';
	// #endif
	import {
		baseUrl
	} from '@/common/request/baseurl.js';
	export default {
		data() {
			return {
				// #ifdef H5
				userInfo: {},
				avatar: '',
				avatarUrl: '',
				action: baseUrl + '/comFileDetail/uploadPublicFile',
				header: {
					publictoken: uni.getStorageSync('clinetToken')
				},
				// #endif
			}
		},
		computed: {
			// #ifndef H5
			...mapState(['userInfo'])
			// #endif
		},
		created() {
			let that = this;
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				const file = this.base64ToFile(path);
				console.log(file);
				uni.uploadFile({
					url: this.action,
					file: file,
					header: {
						...this.header
					},
					name: 'file',
					success: (res) => {
						that.avatarUrl = JSON.parse(res.data).data;
					}
				});
			})
		},
		onLoad() {
			// #ifdef H5
			this.setUserInfo();
			// #endif
		},
		methods: {
			// 保存资料
			submit() {
				let userInfoSubmit = this.userInfo;
				userInfoSubmit.image = this.avatarUrl;
				this.$u.api.updateUserInfo({
					...userInfoSubmit
				}).then(async res => {
					uni.showToast({
						title: '修改成功'
					})
					await this.$ut.sleep(800);
					uni.navigateBack();
				})
			},
			// 跳转到头像裁剪
			chooseAvatar() {
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 120,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 120,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'png',
					}
				})
			},
			// H5设置用户信息
			setUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo');
				this.avatar = this.userInfo.image
			},
			base64ToFile(data) {
				// 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
				let binary = atob(data.split(',')[1]);
				let mime = data.split(',')[0].match(/:(.*?);/)[1];
				let array = [];
				for (let i = 0; i < binary.length; i++) {
					array.push(binary.charCodeAt(i));
				}
				let fileData = new Blob([new Uint8Array(array)], {
					type: mime,
				});
				let file = new File([fileData], `${new Date().getTime()}.png`, {
					type: mime
				});
				return file;
			}
		}
	}
</script>

<style lang="scss">
	.avatar-box {
		position: relative;
		padding-top: 60rpx;
		padding-bottom: 20rpx;

		.avatar-upload {
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .3);
			z-index: 2;
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 200upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>